<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>微信SDK学习</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <!--微信JSSDK-->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <style>
        ul, li{list-style: none;}
        .imgList{width: 100%;height: 130px;margin: 5px;border-radius: 10px;}
    </style>
</head>
<body>

<div class="container">
    <div class="page-header">
        <h1>微信SDK学习
            <small>接口练习</small>
        </h1>
    </div>
    <a class="btn btn-info btn-block" href="javaScript:chooseImage()">选择照片</a>
    <a class="btn btn-info btn-block" href="javaScript:getNetworkType()">获取网络类型</a>
    <a class="btn btn-info btn-block" href="javaScript:scanQRCode()">扫一扫</a>
    <a class="btn btn-default btn-block" href="javaScript:startRecord()">开始录音</a>
    <a class="btn btn-info btn-block" href="javaScript:stopRecord()">停止录音</a>
    <a class="btn btn-info btn-block" href="javaScript:playVoice()">播放录音</a>
    <a class="btn btn-info btn-block" href="javaScript:pauseVoice()">暂停播放</a>
    <a class="btn btn-info btn-block" href="javaScript:stopVoice()">停止播放</a>
    <a class="btn btn-info btn-block" href="javaScript:translateVoice()">识别录音</a>
    <ul class="row" id="imgs" style="padding-left: 0">
    </ul>
</div>


<script>
    var isWeixin = function () { //判断是否是微信
        var ua = navigator.userAgent.toLowerCase();
        return ua.match(/MicroMessenger/i) == "micromessenger";
    };
    if (!isWeixin()) {
        layer.alert('请在微信中打开此页面哦');
    }
    //接口列表
    var Apilist = ['chooseImage', 'previewImage', 'getNetworkType', 'scanQRCode', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'onVoicePlayEnd', 'translateVoice'];
    //js配置项
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '<?php echo $configArr['appId']?>', // 必填，公众号的唯一标识
        timestamp:<?php echo $configArr['timestamp']?>, // 必填，生成签名的时间戳
        nonceStr: '<?php echo $configArr['nonceStr']?>', // 必填，生成签名的随机串
        signature: '<?php echo $configArr['signature']?>',// 必填，签名
        jsApiList: Apilist // 必填，需要使用的JS接口列表
    });


    //图像
    //所有选择图片地址数组
    var imgArr = [];

    function chooseImage() {
        wx.chooseImage({
            count: 2, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                var imgStrs = '';
                for (key in localIds) {
                    var currentImg = localIds[key];
                    //去重
                    if (imgArr.indexOf(currentImg) != -1) {
                        continue;
                    }
                    imgArr.push(currentImg);
                    imgStrs += `<li class="col-xs-6">
                                    <img class="imgList" src="` + currentImg + `">
                               </li>`;
                }
                $('#imgs').append(imgStrs);
            }
        });
    }

    //图像预览
    $(document).on("click", "#imgs li img", function () {
        var current = $(this).attr('src');
        wx.previewImage({
            current: current, // 当前显示图片的http链接
            urls: imgArr // 需要预览的图片http链接列表
        });
    });

    //网络类型
    function getNetworkType() {
        wx.getNetworkType({
            success: function (res) {
                var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
                layer.msg('网络类型：' + networkType);
            }
        });

    }

    //扫一扫
    function scanQRCode() {
        wx.scanQRCode({
            needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                layer.msg('内容为:' + result);
            }
        });
    }

    //开始录音
    var localId = '';

    function startRecord() {
        wx.startRecord();
        layer.msg('录音中');
    }

    //停止录音
    function stopRecord() {
        wx.stopRecord({
            success: function (res) {
                localId = res.localId;
                layer.msg('停止录音');
            }
        });
    }

    //播放录音
    function playVoice() {
        wx.playVoice({
            localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
        });
        layer.msg('播放录音');
    }

    //暂停播放
    function pauseVoice() {
        wx.pauseVoice({
            localId: localId // 需要暂停的音频的本地ID，由stopRecord接口获得

        });
        layer.msg('暂停播放');
    }

    //停止播放
    function stopVoice() {
        wx.stopVoice({
            localId: localId // 需要停止的音频的本地ID，由stopRecord接口获得
        });
        layer.msg('停止播放');
    }

    //智能识别语音
    function translateVoice() {
        wx.translateVoice({
            localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                layer.msg(res.translateResult); // 语音识别的结果
            }
        });
    }
</script>

</body>
</html>